<template>
    <control title="图文导航">
        <h4>导航样式</h4>
        <choice :data="navData" width="112px" group="navData" v-model="content.style"></choice>
        <template #content>
            <el-form ref="form" :model="content" @submit.native.prevent label-width="90px" size="mini" label-position="left">
                <draggable v-model="content.data" handle=".select-cover" chosenClass="chosen" forceFallback="true" group="navigation10" animation="1000" @start="onStart" @end="onEnd" v-if="content.style==1">
                        <template #item="{element}">
                        <div class="select-cover"  v-if="content.style==1">
                            <i class="le-icon le-icon-cha2 select-photo__close" @click="handleDelete(index)"></i>
                            <div class="select-cover__content">
                                <div class="select-cover__item">
                                    <pictureSelect v-model="element.url" :limit="1">
                                        <template #upload>
                                            <div class="select-cover__item-add">
                                                <i class="le-icon le-icon-add"></i>
                                                <span class="select-cover__item-text">添加图片</span>
                                            </div>
                                        </template>
                                        <template #preview="preview" >
                                            <div  class="select-cover__item-edit">
                                                <el-image :src="preview.url" fit="cover"></el-image>
                                                <div class="select-cover__item-tips">
                                                    替换图片
                                                </div>
                                            </div>
                                        </template>
                                    </pictureSelect>
                                </div>
                                <div class="select-cover__detail">
                                    <el-form-item label="标题" label-width="40px">
                                        <el-input type="text"   placeholder="请输入标题" v-model="element.title" maxlength="10">
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item label="链接" label-width="40px">
                                        <hyperlinkSelect v-model="element.link">请选择跳转链接</hyperlinkSelect>
                                    </el-form-item>
                                </div>
                            </div>
                        </div>
                   </template>
                </draggable>
                <draggable v-model="content.data" handle=".select-text" chosenClass="chosen" forceFallback="true" group="navigation10" animation="1000" @start="onStart" @end="onEnd"  v-if="(content.style==2)">
                    <template #item="{element,index}">
                       
                    <div class="select-text">
                            <i class="le-icon le-icon-cha2 select-photo__close" @click="handleDelete(index)"></i>
                            <div class="select-text__detail">
                                <el-form-item label="标题" label-width="40px">
                                    <el-input type="text"   placeholder="请输入标题" v-model="element.title" maxlength="10">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="链接" label-width="40px">
                                    <hyperlinkSelect v-model="element.link">请选择跳转链接</hyperlinkSelect>
                                </el-form-item>
                            </div>
                        </div>
                   </template>
                </draggable>
            </el-form>
            <div class="button-adddata">
                <el-button @click="handleAdditem" :disabled="this.content.data.length>=20">添加导航</el-button>
                <p class="tips">
                    最多添加20个导航，建议图片尺寸：200px*200px 拖拽可改变导航顺序
                </p>
            </div>
        </template>
        <template #style>
            <el-form ref="form" :model="facade" @submit.native.prevent label-width="90px" size="mini" label-position="left">
                <div class="control-item-title">展示样式</div>
                <choice :data="styleData" width="112px" group="nav_style" v-model="facade.nav_style"></choice>
                <el-form-item label="显示行数" v-if="facade.nav_style == 2">
                    <el-radio-group v-model="facade.nav_line">
                        <el-radio :label="2">2行</el-radio>
                        <el-radio :label="3">3行</el-radio>
                        <el-radio :label="4">4行</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="每行个数" v-if="facade.nav_style == 2">
                    <el-radio-group v-model="facade.nav_line_mun">
                        <el-radio :label="3">3个</el-radio>
                        <el-radio :label="4">4个</el-radio>
                        <el-radio :label="5">5个</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-divider v-if="facade.nav_style==2"></el-divider>
                <div class="control-item-title" v-if="facade.nav_style==2">指示器样式</div>
                <choice :data="indicatorData" group="indicator" v-model="facade.indicator_style" v-if="facade.nav_style==2"></choice>
                <div class="empty10"></div>
                <el-form-item label="选中颜色" v-if="facade.nav_style==2">
                    <colour v-model="facade.active_color" colour="#f5212d"></colour>
                </el-form-item>
                <el-divider></el-divider>
                <div class="control-item-title">颜色设置</div>
                <el-form-item label="背景颜色">
                    <colour v-model="facade.background_color" colour="#FFFFFF"></colour>
                </el-form-item>
                <el-form-item label="文字颜色">
                    <colour v-model="facade.text_color" colour="#333333"></colour>
                </el-form-item>
            </el-form>
        </template>
    </control>
</template>
<script type="text/javascript">
import control from '/$/magic/components/control.vue'
import choice from '/$/magic/components/choice.vue'
import colour from '/$/magic/components/colour.vue'
import slider from '/$/magic/components/slider.vue'
import convert from '/$/magic/components/convert.vue'
import pictureSelect from '/$/magic/components/pictureSelect/index.vue'
import hyperlinkSelect from '/$/magic/components/hyperlinkSelect/select.vue'
import draggable from 'vuedraggable'
export default {
    components: {
        control,
        choice,
        colour,
        // slider,
        // convert,
        pictureSelect,
        hyperlinkSelect,
        draggable
    },
    data() {
        return {
            drag: false,
            contentdef: {},
            navData: [{
                value: 1,
                icon: "le-icon-graphic-graphic",
                name: "图文导航"
            }, {
                value: 2,
                icon: "le-icon-graphic-text",
                name: "文字导航"
            }],
            styleData: [{
                value: 1,
                icon: "le-icon-gray-line",
                name: "单行展示"
            }, {
                value: 2,
                icon: "le-icon-graphic-multiplelines",
                name: "多行展示"
            }],
            indicatorData: [{
                value: 2,
                icon: "le-icon-graphic-indicator",
                name: "长条"
            }, {
                value: 1,
                icon: "le-icon-graphic-point",
                name: "圆形"
            }]
        };
    },
    /**
     * 计算属性
     * @type {Object}
     */
    computed: {
        content: {
            get() {
                return this.$store.getters.content;
            },
            set(value) {
                let data = {
                    key: "content",
                    value: value
                }
                this.$store.commit('setAttribute', data)
            }
        },
        facade: {
            get() {
                return this.$store.getters.facade;
            },
            set(value) {
                let data = {
                    key: "facade",
                    value: value
                }
                this.$store.commit('setAttribute', data)
            }
        }

    },
    /**
     * 页面渲染前
     * @return {[type]} [description]
     */
    created() {

    },
    /**
     * 数据监听
     * @type {Object}
     */
    watch: {

    },
    /**
     * 页面加载执行
     * @return {[type]} [description]
     */
    async mounted() {
        console.log("图文到哈",this.content)
    },
    methods: {
        openFile(index){
          this.$refs.clUpload[index].open()
        },
        //开始拖拽事件
        onStart() {
            this.drag = true;
        },
        //拖拽结束事件
        onEnd() {
            this.drag = false;
        },
        /**
         * 删除元素
         * @return {[type]} [description]
         */
        handleDelete(index) {
            this.content.data.splice(index, 1);
        },
        /**
         * 添加元素
         * @return {[type]} [description]
         */
        handleAdditem() {
            if (this.content.data.length < 20) {
                this.content.data.push({
                    url: "",
                    title: "导航",
                    link: {}
                });
            } else {
                this.$message({
                    message: '最多添加20张轮播图片',
                    type: 'warning'
                });
            }

        }
    }
};
</script>
<style lang="less" scoped>
@import '../attribute.less';
</style>